<script setup lang="ts">
import { EButton } from 'exploria-ui';
import { ref } from 'vue';

const loading = ref(false);

const startLoading = () => {
    loading.value = true;
    setTimeout(() => {
        loading.value = false;
    }, 2000);
};

const colorList = [
    '#5656D3FF',
    '#FF5656FF',
    'rgba(255,117,86,0.83)',
    '#bfa762',
    '#8181ed',
    '#f47c7c',
    '#5ad35a',
    '#7cc3d1',
    '#d281ed',
    '#dcb858',
    '#2c952c',
];
</script>

<template>
    <div class="using">
        普通按钮
        <div>
            <EButton :color="color" v-for="color of colorList" :key="color">
                按钮
            </EButton>
        </div>

        <div>
            <EButton
                :color="color"
                v-for="color of colorList"
                :key="color"
                plain
            >
                按钮
            </EButton>
        </div>

        Loading
        <div>
            <EButton
                @click="startLoading"
                v-for="color of colorList"
                :key="color"
                :color="color"
                :loading="loading"
            >
                按钮
            </EButton>
        </div>

        <div>
            <EButton
                :color="color"
                v-for="color of colorList"
                :key="color"
                plain
                @click="startLoading"
                :loading="loading"
            >
                按钮
            </EButton>
        </div>

        失效按钮
        <div>
            <EButton
                :color="color"
                v-for="color of colorList"
                :key="color"
                disabled
            >
                按钮
            </EButton>
        </div>
        <div>
            <EButton
                :color="color"
                v-for="color of colorList"
                :key="color"
                disabled
                plain
            >
                按钮
            </EButton>
        </div>
    </div>
</template>

<style scoped lang="scss">
.using {
    border-radius: 4px;
    text-align: center;
}
</style>
